/* ====================================================== 
   Button                 
/* ====================================================== */

/*! 
 ---------------------------
 1) Common button styles
 ---------------------------
 */ 

.button {
	display: inline-block;
	text-align: center;
	min-width: 100px;
	margin: 0.875rem 1.75rem 0.875rem 0;
	padding: 0.4375rem 1.5rem;
	border: none;
	background: none;
	color: inherit;
	vertical-align: middle;
	position: relative;
	background-size: 300% 100%;
	font-weight: 600;
	text-transform: uppercase;
	z-index: 1;

	&.disable {
		border-color: #e4e7ed !important;
		background-color: #e4e7ed !important;
		cursor: not-allowed;
		
	}
	
	
	&.hide {
		display: none !important;
	}

	/* Waiting state */
	&.active,
	&.wait {
		background-image: linear-gradient(-45deg,rgba(0,0,0,.15) 25%,transparent 25%,transparent 50%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.15) 75%,transparent 75%,transparent) !important;
		background-size: 30px 30px !important;
		animation: move-waiting-stripes 0.5s linear infinite !important;
		cursor: wait !important;

	}


	&:hover {
		background-position: 100% 0 !important;
	}
	&.button-radius {
		border-radius: 35px;
	}
	
	&:focus {
	    outline: none;
	}
	> span {
	    vertical-align: middle;
	}
	
}


@keyframes move-waiting-stripes {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 30px 0px;
    }
}


.t-c .button {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.button-text-white {
    color: #fff;
}

.button-box-br {
    margin-left: -0.875rem;
}

@media all and (max-width: 768px) {
	.button {
		margin: 0.7rem !important;
		padding: 0.35rem 0.875rem !important;
	}
}


.button-space-none {
    margin: 0;
}

@media all and (max-width: 768px) {
	.button-space-none {
	    margin: 0 !important;
	}
}

.button-fullwidth {
	max-width: none;
	width: 100%;
}

@media all and (max-width: 768px) {
	.button-fullwidth {
		max-width: none !important;
		width: calc( 100% - 1.75rem ) !important;
	}
}

/*! 
 ---------------------------
 2) Borders
 ---------------------------
 */ 
.button-border-thin {
    border: 1px solid;
}

.button-border-medium {
    border: 2px solid;
}

.button-border-thick {
    border: 3px solid;
}

.button-border-white {
    border-color: #fff;
}

/*! 
 ---------------------------
 3) Sizes
 ---------------------------
 */ 
.button-size-tiny {
    font-size: 0.75rem;
}

.button-size-s {
    font-size: 0.875rem;
}

.button-size-m {
	font-size: 1rem;
	margin: 1rem 0.875rem 1rem 0;
	padding: 0.4375rem 2rem;
}

.button-size-l {
	font-size: 1.375rem;
	margin: 1.375rem 1rem 1.375rem 0;
	padding: 0.4375rem 3rem;
}


/*! 
 ---------------------------
 4) Hover
 ---------------------------
 */ 

.button-hover {
	overflow: hidden;
	@include transition-default();
	
	&:hover {
		color: $primary-text-color1;
		border-color: $primary-text-color1;
	}
}


/*! 
 ---------------------------
 5) Background
 ---------------------------
 */ 
.button-bg:hover {
    opacity: 0.7;
}

/* Your Custom colors for buttons */

.button-bg-primary {
	border-color: $btn-gradient-color1 !important;
	background-color: $btn-gradient-color1 !important;
	background-image: linear-gradient(to right, $btn-gradient-color1 0%, $btn-gradient-color2 20%, $btn-gradient-color3 100%) !important;
	box-shadow: 0 4px 15px 0 rgba(236, 94, 121, 0.75);
	color: #fff !important;
	width: auto !important; 
	
	&.button-fullwidth {
		width: 100% !important;
	}
	
	&.bg-none {
		background: none !important;
		color: $btn-gradient-color1 !important;
		
		&:hover {
			background-color: $btn-gradient-color1 !important;
			background-image: linear-gradient(to right, $btn-gradient-color1 0%, $btn-gradient-color2 20%, $btn-gradient-color3 100%) !important;
			color: #fff !important;
		}
	}
}


.button-bg-secondary {
	border-color: #fff !important;
	background-color: transparent !important;
	box-shadow: 0 4px 15px 0 rgba(255, 255, 255, 0.2);
	color: #fff !important;
	width: auto !important; 
	
	&.button-fullwidth {
		width: 100% !important;
	}	
	
	&:hover {
		background-color: #fff !important;
		color: $primary-text-color1 !important;

	}
}

